<template>
<!-- 会议预定 -->
    <div id="conferenceReservation">
        <p style="margin-left:20px;margin-top:10px; font-size:18px;">预定会议</p>
        <div class="content">
            <p style="font-size:15px;">选择会议室</p>
            <div class="choose">
                <el-carousel :interval="4000" type="card" height="200px">
                    <el-carousel-item v-for="item in 4" :key="item">
                      <p class="medium">{{ item }}</p>
                    </el-carousel-item>
                </el-carousel>
            </div>
        </div>
        <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="meet-ruleForm"
        >
            <el-form-item
              label="会议主题"
              prop="meetTitle"
              style="display: inline-block; width: 500px; margin-left: 20px; margin-top:5px;"
            >
              <el-input v-model="ruleForm.meetTitle" style="width: 300px"></el-input>
            </el-form-item>

            <el-form-item
              label="会议议题"
              prop="meetChatTitle"
              style="display: inline-block; width: 500px;margin-top:5px; margin-left: 20px"
            >
              <el-input v-model="ruleForm.meetChatTitle" style="width: 300px"></el-input>
            </el-form-item>

            <el-form-item
              label="会议内容"
              prop="meetContent"
              style=" width: 500px; margin-left: 20px;margin-top:5px;position: absolute;top: 300px; left:400px;"
            >
              <el-input
                type="textarea"
                v-model="ruleForm.meetContent"
              ></el-input>
            </el-form-item>

            <el-form-item
              label="参会人员"
              prop="meetPerson"
              style="display: inline-block; width: 500px;margin-top:5px; margin-left: 20px"
            >
              <el-input v-model="ruleForm.meetPerson" style="width: 800px"></el-input>
            </el-form-item>

            <el-form-item
              label="审核人员"
              prop="checker"
              style="display: inline-block; width: 500px;margin-top:5px; margin-left: 20px"
            >
              <el-input
                v-model="ruleForm.checker"
                style="width: 800px"
              ></el-input>
            </el-form-item>

            <el-form-item
              label="会议时间"
              required
              style="display: inline-block; width: 500px;margin-top:5px; margin-left: 20px"
            >
              <el-form-item prop="meetTime">
                <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  v-model="ruleForm.meetTime"
                  style="width: 800px"
                ></el-date-picker>
              </el-form-item>
            </el-form-item>

            <el-form-item>
              <el-button class="baocun" type="primary" @click="submitMeet"
                >提交</el-button
              >
            </el-form-item>
          </el-form>
    </div>
</template>

<script>

export default({
    name:"ConferenceReservation",
    data(){
        return{
            ruleForm:[], 
            rules: {
                meetTitle:'',
                meetChatTitle:'',
                meetContent:'',
                meetPerson:'',
                checker:'',
                meetTime:'',
            }
        }
    },
    
    methods: {
        submitMeet() {}
    },
})
</script>

<style scoped>
*{
    margin: 0px;
    padding: 0px;
}
.content{
    width: 900px;
    height: 240px;
    position: relative;
    top: 10px;
    left: 40px;
    /* background-color: rosybrown; */
}
.choose{
    width: 800px;
    height: 200px;
    border-radius: 5px;
    background-color: rgba(231, 231, 231,0.2);
    position: absolute;
    left: 40px;
}  
.el-carousel__item p {
    background-image:url("/src/assets/meeting/meetroom5.webp");
    background-repeat: no-repeat;
    background-size: cover;
    width: 300px;
    height: 200px;
    position: relative;
    left: 50px;
    border-radius: 10px;
}

.meet-ruleForm{
    width: 920px;
    height: 270px;
    padding-top: 30px;
    /* background-color: rosybrown; */
}
.baocun{
    position: relative;
    top: 5px;
    left: 700px;
    width: 100px;
    height: 30px;

}

</style>